<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-16 16:29:27
 * @LastEditTime: 2023-11-02 17:54:53
 * @LastEditors: huangshuai 
-->
<template>
  <el-dialog v-model="dialogVisible" title="公告修改" width="40%">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="公告内容" prop="notice">
        <el-input v-model="ruleForm.notice" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { updateNoticeInfo } from "@/api/super";
import { ElMessage } from "element-plus";
const emits = defineEmits(["getData"]);
interface RuleForm {
  notice: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  notice: "",
});

const rules = reactive<FormRules<RuleForm>>({
  notice: [{ required: true, message: "请输入内容", trigger: "blur" }],
});
const dialogVisible = ref<boolean>(false);
const nId = ref();
const showDialog = (data: any) => {
  console.log(data);

  nId.value = data.id;
  dialogVisible.value = true;
};
defineExpose({
  showDialog,
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      updateNoticeInfo({
        content: ruleForm.notice,
        enable: true,
        id: nId.value,
      }).then((res: any) => {
        ElMessage({
          message: res.message,
          type: "success",
        });
        dialogVisible.value = false;
        emits("getData");
      });
    }
  });
};
const resetForm = () => {
  ruleForm.notice = "";
  dialogVisible.value = false;
};
</script>

<style scoped lang="less">
.box-card {
  word-wrap: break-word;
}
</style>
